@charset "utf-8";
@import "reset.scss";
.tk{
    margin:0px auto;
    width: 1280px;
    height: 100%;
   // border: 1px solid black;
}

header{
    width: 1280px;
    height: 137px;
    //border: 1px solid black; 
}

.headertop{
    width: 1280px;
    height: 40px;
    background: #dfdfdf;
}

.headertop-telphone{
     display: inline-block;
    height: 30px;
    width: 540px;
    padding-left: 160px;
    padding-top: 10px;
    font-size: 14px; 
}

 .headertop a, .headertop-index, .headertop-collect {
    color: #000000;
     }
    
.headertop a:hover, .headertop-index, .headertop-collect {
    color: skyblue; 
    }
    
.headertop-index{
    display: inline-block;
    height: 30px;
    width: 80px;
    text-align: center;
    margin-left: 258px;
    padding-top: 10px;
    font-size: 14px; }
    
.headertop-collect {
    display: inline-block;
    height: 30px;
    width: 80px;
    text-align: center;
    float: right;
    margin-right: 150px;
    padding-top: 10px;
    font-size: 14px; }

.header-navigation{
     width: 1280px;
      height: 97px; 
      //border: 1px solid blue;
}


//公司logo和名称
.header-navigation .logo-img {
    width: 473px;
    height: 97px;
    float: left;
    //border: 1px solid blue; 
    }
 
 //公司logo   
.header-navigation .logo-img .lg-img {
      width: 210px;
      height: 97px;
      float: left; 
      //border: 1px solid blue;
      }
      
.header-navigation .logo-img .lg-img img {
        float: right;
         }


//公司名称         
.header-navigation .logo-img .lg-img1 {
      width: 239px;
      height: 97px;
      float: left;
      // border: 1px solid blue;
      }
      
 .header-navigation .logo-img .lg-img1 h2 {
        letter-spacing: 4px;
        padding-top: 25px;
        padding-left: 10px;
        font-size: 23px; }
        
.header-navigation .logo-img .lg-img1 p {
        font-size: 14px;
        padding-left: 10px;
        color: #000; } 
 
 
 //导航       
.header-navigation .navigation  {
    display: block;
    width: 660px;
    height: 97px;
    margin-left: 495px;
    //border: 1px solid gold;
}      

.header-navigation .navigation li{
   display: inline-block;
      width: 92px;
      height: 61px;
      font-size: 14px;
      padding: 0px;
      text-align: center;
      float: left;
      padding-top: 28px;
  }
 .header-navigation .navigation li a{
     color: #000000; 
     font-weight: 600;
  }

li:hover{
    background: #faf8f8;
    border-bottom: 4px solid #3c9bd3;
    transition: all 600ms linear;
}

//头部下的轮播大图
//.carousel{
//  width: 1280px;
//  height: 545px;
// 
//}

.swiper-container {
      width: 100%;
      height:  545px;;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
 }

//内容部分
.matter{
     width: 1280px;
     height: 1684px;
   
}

//内容上半部分
.maintop{
     width: 1280px;
    height: 1148px;
    background: #f6f6f6;
}

//内容上半部分--产品介绍
.matter-products{
     width: 1280px;
     height: 473px;
     padding-top: 71px;
     //border: 1px solid saddlebrown;
}
//内容上半部分--产品介绍--第一个新闻中心
.products-news{
     width: 314px;
     height: 474px;
     float: left;
     margin-left: 153px;
     box-shadow: 8px 5px 2px #DFDFDE;
     //border: 1px solid hotpink;
}
//内容上半部分--产品介绍--第一个新闻中心之上部分（大）
.products-news1{
     width: 314px;
     height: 348px;
     //border-bottom: 2px dotted gainsboro;
}
.products-news1:hover{
      transition: all 2s;
        transform: rotateY(180deg); 
}
//内容上半部分--产品介绍--第一个新闻中心之上部分（小）
.news1-top{
    width: 314px;
    height: 168px;
    background: #2395cb;
}

//内容上半部分--产品介绍--第一个新闻中心之上部分（中间圆图）
.news1-top1{
    text-align: center;
    margin-top: 16px;
    margin-left: 128px;
}

.news1-top1:hover{
      transition: all 500ms;
      transform: scale(1.2) rotate(360deg); 
}
//内容上半部分--产品介绍--第一个新闻中心之上部分（新闻中心文字）
.news1-p1{
    text-align: center;
    line-height: 30px;
    font-weight: bolder;
    letter-spacing: 1px; 
    color: #FFFFFF;
}
.news1-p1:hover{
    transform:skew(60deg);
}
//内容上半部分--产品介绍--第一个新闻中心之上部分（新闻中心文字之下划线）
.news1-p2{
    margin-left: 102px;
    width: 108px;
    text-align: center;
    border:1px solid white ;
}
//内容上半部分--产品介绍--第一个新闻中心之中间部分
.news1-centre{
    width: 314px;
    height: 180px;
    background: white;
    //border: 1px solid saddlebrown;
}
//内容上半部分--产品介绍--第一个新闻中心之中间部分（三角形图）
 .centre1{
    width: 314px;
    height: 22px;
    text-align: center;
    //border: 1px solid saddlebrown;
   
}
//内容上半部分--产品介绍--第一个新闻中心之中间部分（左侧标题和图片）
.news1-centre1{
    width: 134px;
    height: 157px;
    line-height: 45px;
    font-weight: 600;
    padding-left: 16px;
   //border: 1px solid saddlebrown;
   float: left;
    
}
//内容上半部分--产品介绍--第一个新闻中心之中间部分（右侧文字）
.news1-centre .centre2{
     width: 160px;
    height: 121px;
    padding-top: 36px;
    float: left;
     font-weight: bolder;
     line-height: 25px;
     font-size: 16px;
   //border: 1px solid saddlebrown;
    
}
//内容上半部分--产品介绍--第一个新闻中心之下面部分
.news1-bottom{
    width: 314px;
    height: 125px;
   // border: 1px solid saddlebrown;
}
.xuxian{
    margin-left: 10%;
     width: 80%;
     border-bottom: 2px dotted gainsboro;
}
.news1-bottom ul{
    margin-left: 32px;
    margin-top: 15px;
    list-style: disc;
}

.news1-bottom .news1-bottom1{
    font-size: 14px;
    font-weight: 600;
     line-height: 25px;
      color: #0099ff;
      
}
.news1-bottom .news1-bottom1 a{
    color: #000000;   
}

.news1-bottom .news1-bottom1:hover{
     transition: all 5s;
     transform: rotateX(360deg);
}
.news1-bottom:hover{
    transition: all 5s;
    transform: scale(1.1);
}

//内容上半部分--产品介绍之新品发布
.new-product{
    width: 314px;
     height: 474px;
     float: left;
     margin-left:16px; 
     box-shadow: 8px 5px 2px #DFDFDE;
     //border: 1px solid hotpink;
}

.new-product:hover{
     transition: all 2s;
     transform: rotateY(360deg); 
}
//内容上半部分--产品介绍之新品发布上半部分
.new-product1{
     width: 314px;
     height: 168px;
     background: #3ed1a4;
}
.new-product2{
     width: 314px;
     height: 307px;
     background: white;
}

.new1{
    width: 314px;
    height: 188px;
}
.new2{
    width: 314px;
    height: 119px;
}

.new2-p2{
    text-align: center;
    font-weight: 700;
    color: #2395cb;
    font-size: 20px;
}
.new2-p3{
    text-align: center;
    font-weight: 600;
    color: #000;
    font-size: 14px;
    line-height: 50px;
}

//内容上半部分--产品介绍之品牌介绍
.information{
    width: 314px;
     height: 168px;
     background: #895ea3;
}

.information1{
     width: 314px;
    height: 154px;
    padding-left: 10px;
    padding-top: 24px;
    //border: 1px solid hotpink;
}

.information2{
   width: 314px;
    height: 88px;
    background: url(../img/02.png) no-repeat;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding-top: 20px;
    line-height: 1.5;
    //border: 1px solid hotpink;
    
}

.about{
    width: 1280px;
      height: 596px;
     // border: 1px solid hotpink;
}
.about1{
     width: 1280px;
     height: 153px;
}
.about1-p1 {
          display: block;
          width: 98px;
          height: 35px;
          font-size: 18px;
          font-weight: bolder;
          text-align: center;
          margin: auto;
          padding-top: 35px;

 }
 .about1-p2 {
          display: block;
          width: 98px;
          height: 40px;
          font-size: 12px;
          text-align: center;
          position: absolute;
          left: 50%;
          margin-left: -45px;
          background: #f6f6f6;
          z-index: 1;
}
.about1-p3 {
          display: block;
          width: 257px;
          height: 10px;
          position: relative;
          left: 50%;
          margin-left: -125px;
          border-bottom: 1px solid #c9c9c9;
           }
.about2 {
        width: 1280px;
        height: 343px;
        //border: 1px  solid black;
        background-image: url(../img/03.png);
        background-repeat: no-repeat; }
        
.about2 .about2-p1 {
          width: 934px;
          height: 113px;
          text-align: center;
          line-height: 30px;
          padding-top: 40px;
          font-size: 14px;
          margin: auto; }

.about2 ul {
          width: 1050px;
          height: 169px;
          background: #FFFFFF;
          margin: auto;
          //border: 1px solid black;
          overflow: hidden; 
         
          
            li{
                  width: 278px;
                  height: 158px;
                  float: left;
                  margin-left: 23px;
                  padding-top: 5px; 
              
          
            }
            .about11{
                 width: 278px;
                  height: 158px;
                  float: left;
                  margin-left: -234px;
                  //: 1px solid #c9c9c9;
      
            }
            .about12{
                width: 278px;
                  height: 158px;
                  float: right;
                  margin-right: -202px;
                  //border: 1px solid #c9c9c9;
            }
} 

.about2 li{
     animation: go 4s linear 500ms infinite normal forwards;
}
@keyframes go {
  33% {
    transform: translateX(-300px); }
  100% {
    transform: translateX(300px); } }
    
.about3{
        width: 1280px;
        height: 106px; 
}

.wbk{
    width: 1280px;
    height: 536px;
    margin-top: 5px;
    //border: 1px solid firebrick;
}

.wekleft{
    width: 540px;
    height: 536px;
    float: left;
    //border: 1px solid firebrick;
}

.left-top{
    width: 540px;
    height: 280px;
    //border: 1px solid firebrick;
}

.code{
    width: 140px;
    height: 100px;
    margin-top:51px ;
    margin-left: 105px;
     text-align: center;
    font-size: 14px;
    float: left;
}

.relation{
    width: 265px;
    height: 228px;
    float: left;   
    padding-top: 52px;
    padding-left: 26px;
    line-height: 30px;
    text-spacing: 3px;
    font-size: 14px;
    vertical-align: middle;
}
.map{
    width: 431px;
    height: 195px;
    float: right;
}

.wekright{
    width: 699px;
    height: 480px;
    float: left;
    padding-top:56px ;
    padding-left:34px ;
    line-height: 35px;
    font-size: 16px;
    // border: 1px solid firebrick; 
}

.wekright1{
    width: 593px;
    height: 24px;
    padding: 10px;
    border: 1px dotted gray;
    background: #f9f8f8;
}

textarea{
    resize: none;
    width: 604px;
    height: 120px;
    border: 1px dotted gray;
    background: #f9f8f8;
}

#button{
    border:none;
    width:123px;
     height:33px;
     background:#6db6ff;
     color: #FFFFFF; 
     font-weight: 300;
      font-size:18px ;
}

.footer1{
    width: 1280px;
    height: 137px;
    //border: 1px solid gold;
}

.footer1-top{
  width: 1280px;
    height: 102px;
    background: #3c9cd3;
    color: white;
     text-align: center;
}
.gz{
    display: inline-block;
     width: 197px;
     height: 20px;
     font-size: 16px;
     margin-top: 20px;
     vertical-align: middle; 
}

.footer1-top .daohang{
    display: inline-block;
    margin-top: 30px;
    margin-left: 40px;
    font-size: 16px;
   // border: 1px solid gold;
    
}
.footer1-top .daohang1{
     display: inline-block;
    margin-top: 30px;
    margin-left: 10px;
    font-size: 16px;
    //border: 1px solid gold;
   
}

.footer1-top dd a{
    color: #fff;
}
.footer1-bottom{
    width: 1280px;
    height: 25px;
     background: #1c1b29;
     color: white;
     text-align: center;
     font-size: 14px;
}
